<template>
  <div class="panel-group" v-if="group.title">
    <div class="panel-group-header">
      <div class="panel-group-icon" @click="collapsed = !collapsed">
        <SvgIcon icon-class="ic_向上" v-if="collapsed" />
        <SvgIcon icon-class="ic_向下" v-else />
      </div>
      <div class="panel-group-title">
        {{ group.title }}
      </div>
      <div class="panel-group-switch" v-if="group.switchVisible">
        <el-switch v-model="data[group.key]" size="small" />
      </div>
    </div>
    <div class="panel-group-body" v-show="!collapsed">
      <slot></slot>
    </div>
  </div>
  <slot v-else></slot>
</template>

<script setup lang="ts">
import { Group } from '../../index.typing';

interface IProps {
  group: Group;
  formData: Record<string, any>;
}

const props = withDefaults(defineProps<IProps>(), {
  group: () => ({
    key: '',
    title: '',
    collapsed: false,
    switchVisible: false,
  }),
  formData: () => ({}),
});

const data = ref(props.formData || {});
const collapsed = ref(props.group.collapsed);

watch(
  () => props.formData,
  () => {
    data.value = props.formData || {};
  }
);
</script>

<style lang="less" scoped>
.panel-group {
  padding: 0 8px;
  margin-bottom: 10px;
  background: #3d3d3d;
  border-radius: 4px;
}

.panel-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  user-select: none;

  .panel-group-icon {
    height: 16px;
    margin-right: 6px;
    cursor: pointer;
  }

  .panel-group-title {
    line-height: 16px;
    margin-right: auto;
  }

  .panel-group-switch {
    height: 16px;
    :deep(.el-switch--small) {
      height: 16px;
      vertical-align: top;
    }
  }
}
</style>
